<template>
<el-drawer :title="drawer.title" :visible.sync="drawer.visible" :before-close="closeDrawer">
    <div class="auditor-content">
        <el-tabs v-model="activeName">
            <el-tab-pane label="设置人员" name="first">
                <div class="common-group">
                    <el-radio-group v-model="apiParams.radio" @change="radioChange">
                        <el-radio :label="3 + ''">指定人员</el-radio>
                        <el-radio :label="6 + ''">指定角色</el-radio>
                        <el-radio :label="7 + ''">发起人</el-radio>
                    </el-radio-group>
                </div>
                <div class="approver-actions">
                    <template v-if="apiParams.radio == 3">
                        <el-button type="primary" round size="mini" @click="addUserDialog"><i class="el-icon-plus" style="margin-right: 5px"></i>添加人员</el-button>
                        <span class="text-desc">不能超过5人</span>
                    </template>
                    <template v-if="apiParams.radio == 6">
                        <el-select v-model="apiParams.role" placeholder="选择角色" filterable clearable @change="roleChange">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.title" :value="item.id + ''">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="approver-list" v-if="apiParams.radio == 3">
                    <el-tag class="approver-item" closable v-for="(item, index) in apiParams.checkedUserList" :key="index" @close="removeUser(index)">
                        {{ getTagTitle(item) }}
                    </el-tag>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="dialog-footer">
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="closeDrawer">取消</el-button>
        </div>
    </div>

    <add-user ref="addUser" :userList="userList" @getCheckedUserList="getCheckedUserList"></add-user>
</el-drawer>
</template>

<script>
import {
    getAllUserApi
} from "@/api/ucenter/user";
import addUser from "./addDialog/addUser.vue";
export default {
    components: {
        addUser,
    },
    name: "SelectAuditor",
    data() {
        return {
            node: {},
            drawer: {
                title: "审批人",
                visible: false,
                type: "",
            },
            activeName: "first", // 默认选中的面板
            apiParams: {
                radio: "3",
                checkedUserList: [],
                role: "",
                roleName: "",
            },
            userList: [],
            roleList: [],
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        showDrawer(node, type) {
            this.node = node;
            if (Object.keys(node.data).length > 0) {
                this.apiParams = node.data;
            }

            if (type == "approver") {
                this.drawer.title = "审批人";
                this.drawer.type = "approver";
            } else {
                this.drawer.title = "抄送人";
                this.drawer.type = "copyTo";
            }
            this.drawer.visible = true;
        },
        closeDrawer() {
            this.drawer.visible = false;
            this.apiParams = {
                radio: "3",
                checkedUserList: [],
                role: "",
            };
        },
        // 单选发生变化
        radioChange() {
            this.apiParams.role = "";
            this.apiParams.checkedUserList = [];
            if (this.apiParams.radio != 7) {
                this.apiParams.operator_id = 0;
            } else {
                this.apiParams.operator_id = 1;
            }
        },

        // 添加人员
        addUserDialog() {
            if (this.$refs["addUser"]) {
                this.$refs["addUser"].showDialog(this.apiParams.checkedUserList);
            } else {
                this.$nextTick(() => {
                    this.$refs["addUser"].showDialog(this.apiParams.checkedUserList);
                });
            }
        },

        // 角色发生改变
        roleChange(e) {
            if (e) this.apiParams.roleName = this.getTagTitle(e, "role");
        },

        // 获取人员
        getCheckedUserList(e) {
            this.apiParams.checkedUserList = e;
        },

        // 移除人员
        removeUser(index) {
            this.apiParams.checkedUserList.splice(index, 1);
        },

        getTagTitle(id, type) {
            let title = "";
            if (type) {
                let target = this.roleList.find((item) => item.id == id);
                if (target) title = target.title;
            } else {
                let target = this.userList.find((item) => item.id == id);
                if (target) title = target.realname;
            }

            return title;
        },

        getUserList() {
            getAllUserApi().then((res) => {
                this.userList = res.data.userList;
                this.roleList = res.data.roleList;
            });
        },

        // 保存
        submit() {
            let params = this.apiParams;
            let node = this.node;
            node.data = params;
            let user = [];
            if (params.checkedUserList.length > 0) {
                params.checkedUserList.forEach((item) => {
                    user.push(this.getTagTitle(item));
                });
                node.content = user.toString();
            } else if (params.operator_id == 1) {
                node.content = "发起者";
            } else {
                node.content = params.roleName;
            }
            this.$emit("nodeChange", node);
            this.closeDrawer();
        },
    },
};
</script>

<style lang="less" scoped>
.auditor-content {
    padding: 0 16px;

    .common-group {
        padding: 0 15px 15px 15px;
    }

    .approver-actions {
        .text-desc {
            margin-left: 10px;
            color: #999;
        }
    }

    .approver-list {
        margin-top: 15px;

        .approver-item {
            margin-right: 8px;
            margin-bottom: 8px;
        }
    }

    .dialog-footer {
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 14px 24px;
        text-align: center;
    }
}
</style>
